<template>
  <div id="layer-content">
    <el-container>
      <el-main>
        <el-form :model="form" ref="form" label-width="120px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="所属图标库" :required="true" prop="iconLibraryId" :rules="[
                { required: true, message: '不能为空'},
                { type: 'string', max: 10,  message: '长度不能超过10位'}
              ]">
                <el-select v-model="form.name" placeholder="请选择所属图标库">
                  <el-option label="elementUI" value="shanghai"></el-option>
                  <el-option label="iconfont" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标class" :required="true" prop="name" :rules="[
                { required: true, message: '不能为空'},
                { type: 'string', max: 10,  message: '长度不能超过10位'}
              ]">
                <el-input v-model="form.name" placeholder="请输入图标class"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标名称" :required="true" prop="chineseName" :rules="[
                { required: true, message: '不能为空'},
                { type: 'string', max: 10,  message: '长度不能超过10位'}
              ]">
                <el-input v-model="form.name" placeholder="请输入图标名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-row id="layer-footerBtn">
          <el-button type="primary" @click="submit('form')">确定</el-button>
          <el-button @click="cancel('form')">取消</el-button>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'addIcon',
  props: {
    layerid: {
      type: String
    }
  },
  created () { },
  data () {
    return {
      isCommit: false, // 用于验证重复提交
      form: {
        iconLibraryId: '',
        name: '',
        chineseName: ''
      }
    }
  },
  methods: {
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid || this.isCommit === true) {
          return;
        }
        this.$http.post('http://rap2.taobao.org:38080/app/mock/257330/user/add', this.form).then(res => {
          this.$layer.close(this.layerid);
          this.$parent.list();
          // if (res.data.code === 200) {
          //   this.$layer.msg('操作成功');
          //   this.$layer.close(this.layerid);
          //   this.$parent.getTableData();
          // } else {
          //   this.$layer.msg(res.data.msg);
          // }
        }).finally(() => {
          this.isCommit = false;
        })
      });
    },
    cancel (formName) {
      this.$refs[formName].resetFields();
      this.$layer.close(this.layerid);
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
.el-select {
  width: 100%;
}
</style>
